import {PageHeaderWrapper} from '@ant-design/pro-layout';
import React from 'react';
import {Card, Col, Row, Spin} from 'antd';
import './index.less';
import {connect} from "dva";

import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import AutoScore from "@/pages/GaoLu/components/AutoScore";
import CoreData from "@/pages/GaoLu/components/CoreData";
import ScoreTrend from "@/pages/GaoLu/components/ScoreTrend";
import {trigger} from "@/utils/utils";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import {eventTrigger} from "@/utils/resize";


class Main extends React.Component {

  extra = {count: 1};

  autoScoreReq = 0;

  onceReq = 0;

  stopLoop = false;

  showFlag = {
    showAutoScore: false
  };

  globalTime = {
    startOfDay: time.getStartOfDay(),
    endOfDay: time.getEndOfDay(),
    currentTime: currentTime()
  };


  async componentDidMount() {
    const {dispatch} = this.props;

    const payload = await getMockTime("GaoLu")
    this.setState({current:payload.current})

    const current = payload.current

    this.onceReq = requestAnimationFrame(() => dispatch({
      type: 'gaolu/autoScore', payload: {
        end: dateFormat(current)
      }
    }));
    this.autoScoreReq = requestAnimationFrame(() =>
      trigger(
        () => {
          const {count} = this.extra;
          debugger
          dispatch({
            type: 'gaolu/getScoreTrendEffect',
            payload: {
              globalTime: this.globalTime,
              start: dateFormat(new Date(current.valueOf() - 24 * 60 * 60 * 1000)),
              end: dateFormat(current)
            }
          });
          this.extra.count = count + 1
        },
        new Date().valueOf(),
        180 * 1000,
        true,
        () => this.stopLoop));

  }

  componentDidUpdate() {
    const {showAutoScore} = this.showFlag;
    const {autoScoreLoading} = this.props;


    if (!showAutoScore) {
      if (autoScoreLoading) {
        this.showFlag.showAutoScore = true;
      }
    }
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.autoScoreReq);
    cancelAnimationFrame(this.onceReq);
    this.stopLoop = true
  }


  render() {
    const {showAutoScore} = this.showFlag;
    return (
      <div>
        <Row type={"flex"}>
          <Col span={13}>
            <Card title="自动打分"
                  bordered={false}
                  loading={!showAutoScore}>
              <AutoScore/>
            </Card>
          </Col>

          <Col span={11} style={{paddingLeft: 8}}>
            <Card
              bordered={false}
              title="打分趋势">
              <ScoreTrend hasParent globalTime={this.globalTime}/>
            </Card>
          </Col>
        </Row>

        <Row style={{marginTop: 17}}>
          <Card
            style={{width: '100%'}}
            bordered={false}
            title="核心参数">
            <CoreData hasParent globalTime={this.globalTime}/>
          </Card>
        </Row>
      </div>
    );
  }
}

export default connect(({global, loading}) => ({
  autoScoreLoading: loading.effects["gaolu/autoScore"],
  global
}))
(Main);
